<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card>
        <el-tabs>
          <!-- 放置页签 -->
          <el-tab-pane label="角色管理">
            <el-row style="height: 60px">
              <!-- 新增角色按钮 -->
              <el-button
                icon="el-icon-plus"
                type="primary"
                size="small"
                @click="showDialog = true"
              >新增角色</el-button>
            </el-row>
            <!-- 表格 -->
            <el-table :data="list" border stripe style="width: 100%">
              <el-table-column label="序号" align="center" type="index">
              </el-table-column>
              <el-table-column align="center" label="角色名称" prop="name">
              </el-table-column>
              <el-table-column align="center" label="描述" prop="description">
              </el-table-column>
              <el-table-column label="操作" align="center">
                <template v-slot="{ row }">
                  <el-button
                    type="success"
                    size="small"
                    @click="onShowAsignPermDialog(row.id)"
                  >分配权限</el-button>
                  <el-button
                    type="primary"
                    size="small"
                    @click="onEdit(row.id)"
                  >编辑</el-button>
                  <el-button
                    type="danger"
                    size="small"
                    @click="onDel(row.id)"
                  >删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <!-- 分页组件 -->
            <el-row
              type="flex"
              justify="center"
              align="middle"
              style="height: 60px"
            >
              <!-- 分页组件 -->
              <el-pagination
                layout="prev,pager,next"
                :total="page.total"
                :page-size="page.pagesize"
                @current-change="onPageChange"
              />
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="公司信息">
            <!-- 警告部分 -->
            <el-alert
              type="info"
              title="对公司名称、公司地址、营业执照、公司地区的更新，将使得公司资料被重新审核，请谨慎修改"
              show-icon
              :closable="false"
            ></el-alert>
            <el-form label-width="120px" style="magarin-top: 50px">
              <el-form-item label="公司名称">
                <el-input
                  v-model="info.name"
                  disabled
                  style="width: 400px"
                ></el-input>
              </el-form-item>
              <el-form-item label="公司地址">
                <el-input
                  v-model="info.companyAddress"
                  disabled
                  style="width: 400px"
                ></el-input> </el-form-item><el-form-item label="邮箱">
                <el-input
                  v-model="info.mailbox"
                  disabled
                  style="width: 400px"
                ></el-input> </el-form-item><el-form-item label="备注">
                <el-input
                  v-model="info.remarks"
                  disabled
                  type="textarea"
                  :rows="3"
                  style="width: 400px"
                ></el-input>
              </el-form-item>
            </el-form>
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </div>
    <el-dialog
      :visible="showDialog"
      v-bind="$attrs"
      :title="form.id ? '编辑角色' : '新增角色'"
      v-on="$listeners"
      @open="onOpen"
      @close="close"
    >
      <el-form
        ref="formRef"
        :model="form"
        :rules="rules"
        size="medium"
        label-width="100px"
      >
        <el-form-item label="角色名称" prop="name">
          <el-input
            v-model="form.name"
            placeholder="请输入角色名称"
            clearable
            :style="{ width: '100%' }"
          ></el-input>
        </el-form-item>
        <el-form-item label="角色描述" prop="description">
          <el-input
            v-model="form.description"
            placeholder="请输入角色描述"
            clearable
            :style="{ width: '100%' }"
          >
          </el-input>
        </el-form-item>
      </el-form>
      <el-row slot="footer" type="flex" justify="center">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="handelConfirm">确定</el-button>
      </el-row>
    </el-dialog>
    <!-- 对话框的快捷代码eldi 在齿轮==>代码片段==>vue-html.json中配置的 -->
    <el-dialog
      title="分配权限"
      :visible.sync="showAsignPermDialog"
      width="50%"
      @close="showAsignPermDialog = false"
    >
      <!-- 使用树形控件 -->
      <!-- :default-checked-keys="permIds" 这个属性是单向的 不是响应式的 -->
      <el-tree ref="permRef" :data="permList" :props="{label :'name'}" default-expand-all node-key="id" show-checkbox check-strictly></el-tree>
      <el-row slot="footer" type="flex" justify="center">
        <el-button @click="showAsignPermDialog = false">取消</el-button>
        <el-button type="primary" @click="asignPerm">确定</el-button>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import { getCompanyById, addRole, delRole, getRoleById, updateRoleById, getRolesList, assignPerm } from '@/api/setting.js'
import { getPermissionList } from '@/api/permisson'
import { translateListToTree } from '@/utils'
export default {
  name: 'Setting',
  components: {},
  props: {},
  data() {
    return {
      permIds: [], // 被选中的数据
      permList: [], // 树形结构的数据初始值
      roleId: undefined,
      showAsignPermDialog: false, // 分配权限对话框的初始状态
      showDialog: false, // 对话框的初始状态
      form: {
        name: undefined,
        description: undefined
      }, rules: {
        name: [{
          required: true,
          message: '请输入角色名称',
          trigger: 'blur'
        }],
        description: []
      },
      list: [],
      info: {},
      page: {
        page: 1,
        pagesize: 5,
        total: 0
      }
    }
  },
  async created() {
    // 获取公司信息 传入参数id
    this.info = await getCompanyById(this.$store.state.user.userInfo.companyId)
    this.getList()
    // 获取数据 转换成树形结构
    this.permList = translateListToTree(await getPermissionList(), '0')
  },
  mounted() { },
  methods: {
    // 控制分配权限的对话框事件
    async onShowAsignPermDialog(id) {
      this.showAsignPermDialog = true
      // 回显数据
      // const { permIds } = await getRoleById(id)
      // this.permIds = permIds
      this.permIds = (await getRoleById(id)).permIds
      this.$refs.permRef.setCheckedKeys(this.permIds) // 通过setCheckedJeys选中节点
      this.roleId = id
    },
    // 确认方法
    async asignPerm() {
      const ids = this.$refs.permRef.getCheckedKeys()
      // 1.调接口 传数据 id 和 permIds
      await assignPerm({
        id: this.roleId,
        permIds: ids
      })
      // 2. 关闭对话框
      this.showAsignPermDialog = false
      // 3. 提示成功
      this.$message.success('操作成功')
      // console.log(ids)
    },
    async getList() {
      const { total, rows } = await getRolesList(this.page)
      this.page.total = total
      this.list = rows
    },
    // 编辑
    async onEdit(id) {
      // 回显数据
      this.form = await getRoleById(id)
      // 显示对话框
      this.showDialog = true
    },
    onDel(id) {
      // 通过代码片段elmecon
      this.$confirm('确认删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async action => {
        await delRole(id)
        this.$message.success('操作成功')
        this.getList()
      })
    },
    onPageChange(val) {
      // 切换页码 重新发请求
      this.page.page = val
      this.getList()
    },
    onOpen() { },
    close() {
      // 点击关闭 或者取消按钮 对话框关闭
      // 这里没有组件通信 直接进行操作就可以了
      this.$refs['formRef'].resetFields()
      // 重置
      // 清空表单的内容
      this.form = {
        name: undefined,
        description: undefined
      }
      // 关闭对话框
      this.showDialog = false
    },
    // 这里是表单校验部分
    handelConfirm() {
      this.$refs['formRef'].validate(async valid => {
        if (!valid) return
        // 根据有无form.id来判断是编辑还是新增
        if (this.form.id) {
          // 发请求进行编辑
          await updateRoleById(this.form)
        } else {
          // 新增
          await addRole(this.form)
        }
        // 2. 提示成功
        this.$message.success('操作成功')
        // 3. 刷新列表
        this.getList()
        this.close()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
